{% load static %}
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>首页</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
		<link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap.min.css' %}"/>
		<link rel="stylesheet" href="{% static 'font-awesome-4.7.0/css/font-awesome.min.css' %}">
		<script src="{% static 'js/jquery-3.5.1.min.js' %}"></script>
		<script src="{% static 'js/bootstrap.bundle.js' %}" type="text/javascript" charset="utf-8"></script>
		<script src="{% static 'js/bootstrap.min.js' %}" type="text/javascript" charset="utf-8"></script>

	</head>
<body>

<!-- 导航 -->
<header>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark"
         style="background: linear-gradient(to right,#aa4b6b,#6b6b83,#3b8d99);">
        <a class="navbar-brand" href="#"><strong class="text-danger">SmartIdPhotos</strong></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText"
                aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarText">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="/index"><i class="fa fa-home"></i>首页 <span
                            class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/detail"><i class="fa fa-commenting"></i>案例</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/blog"><i class="fa fa-building"></i>博客</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/tool"><i class="fa fa-phone"></i>工具箱</a>
                </li>
            </ul>
            <span class="navbar-text">

			  <p><i class="fa fa-phone-square"></i>问题反馈:1902612430</p>
		    </span>
        </div>
    </nav>
</header>

<!-- 主体 -->
<div class="jumbotron jumbotron-fluid">
    <div class="container">
        <h1 class="display-4 text-center">基于PYTHON的智能证件照系统</h1>
        <p class="lead text-center">一个功能丰富的换底工具,能够提供全面的证件照换底</p>
        <div class="row">
            <!--left-->
            <div class="col-sm">
                <div class="card" style="width: 18rem;">
                    <div class="card-body">
                        <h5 class="card-title text-center">原始图片</h5>
                        <img id="default" src="{% static 'img/default.png' %}" class="card-img-top" alt="...">
                    </div>
                </div>
            </div>

            <!--center-->
            <div class="col-sm text-center">
                <form action="/upload/" method="post" enctype="multipart/form-data">
                    {% csrf_token %}
                    <div class="alert alert-primary" role="alert" style="margin-bottom: 0;margin-top: 15px">
                        <lable class="btn-default">图片选择</lable>
                    </div>

                    <input id="demo" type="file" name="picture" class="form-control">
                    <div class="alert alert-danger" role="alert" style="margin-bottom: 0;margin-top: 15px">
                        <lable class="btn-default">转换类型</lable>
                    </div>
                    <select class="form-control" name="nid">
                        <option value="1" name="nid">一寸-[25mm*35mm]</option>
                        <option value="2" name="nid">小一寸-[22mm*32mm]</option>
                        <option value="3" name="nid">大一寸-[33mm*48mm]</option>
                        <option value="4" name="nid">二寸-[35mm*49mm]</option>
                        <option value="5" name="nid">小二寸-[35mm*45mm]</option>
                        <option value="6" name="nid">大二寸-[25mm*53mm]</option>
                        <option value="7" name="nid">美国签证-[25mm*35mm]</option>
                        <option value="8" name="nid">日本签证-[45mmx45mm]</option>
                        <option value="9" name="nid">越南签证-[40mmx60mm]</option>
                        <option value="10" name="nid">身份证-[26mmx32mm]</option>
                        <option value="11" name="nid">居住证 -[26mmx32mm]</option>
                        <option value="13" name="nid">社保卡-[358x441dpi]</option>
                        <option value="14" name="nid">导游证-[285x385dpi]</option>
                        <option value="15" name="nid">教师资格证-[25mmx35mm]</option>
                        <option value="16" name="nid">驾驶证(小一寸)-[22mmx32mm]</option>
                        <option value="17" name="nid">入学照-[25mmx35mm]</option>
                        <option value="18" name="nid">简历照片(一寸)-[25mmx35mm]</option>
                        <option value="19" name="nid">三寸-[54mmx84mm]</option>
                        <option value="20" name="nid">四寸-[76mmx102mm]</option>
                        <option value="21" name="nid">五寸-[89mmx127mm]</option>
                        <option value="22" name="nid">国考(二寸)-[35mmx45mm]</option>
                        <option value="23" name="nid">国家司法考试-[413x626dpi]</option>
                        <option value="24" name="nid">医保证-[358x441dpi]</option>
                        <option value="25" name="nid">健康证(一寸)-[25mmx35mm]</option>
                        <option value="26" name="nid">执法证-[358x441dpi]</option>
                        <option value="27" name="nid">校园卡-[240x320dpi]</option>
                        <option value="28" name="nid">入台证(小二寸)-[35mmx45mm]</option>
                        <option value="29" name="nid">二级建造师证-[295x413dpi]</option>
                        <option value="30" name="nid">一级建造师证(电子版)-[472x630dpi]</option>
                        <option value="31" name="nid">二级建造师证-[455x661dpi]</option>
                        <option value="32" name="nid">职业兽医资格证-[230x334dpi]</option>
                        <option value="33" name="nid">成人自考-[384x512dpi]</option>
                        <option value="35" name="nid">成人自考-[294x413dpi]</option>
                        <option value="36" name="nid">公务员考试-[35mmx45mm]</option>
                        <option value="37" name="nid">电子护照人像照片-[33mmx48mm]</option>
                        <option value="38" name="nid">海外申请护照在线预约照片-[33mmx48mm]</option>
                        <option value="39" name="nid">会计从业资格证-[25mmx35mm]</option>
                        <option value="40" name="nid">英语四六级考试-[144x172，0~40kb]</option>
                        <option value="42" name="nid">英语四六级考试-[144x192，10~20kb]</option>
                        <option value="46" name="nid">英语四六级考试-[240x320，20~30kb]</option>
                        <option value="48" name="nid">学位英语-[390x567dpi]</option>
                        <option value="49" name="nid">英语 AB 级考试-[390x567dpi]</option>
                        <option value="50" name="nid">普通话水平测试-[390x567dpi]</option>
                        <option value="53" name="nid">全国计算机考试(33mm~48mm)-[390X567dpi]</option>
                        <option value="60" name="nid">执业药师资格考试（一寸）-[295x413dpi]</option>
                        <option value="61" name="nid">执业药师资格考试（二寸）-[413x579dpi]</option>
                        <option value="62" name="nid">执业医师资格报名-[354x472dpi]</option>
                        <option value="67" name="nid">学籍照片-[358x441dpi]</option>
                        <option value="68" name="nid">入学报名(一寸)-[25mmx35mm]</option>
                        <option value="69" name="nid">大学入学(小二寸)-[35mmx45mm]</option>
                        <option value="70" name="nid">高考报名-[420x560dpi]</option>
                        <option value="71" name="nid">社保卡(350dpi)-[252x312dpi]</option>
                        <option value="72" name="nid">社保卡(350dpi,无回执,10-20KB)-[358x441dpi]</option>
                        <option value="73" name="nid">社保卡(350dpi,无回执,25~40KB)-[358x441dpi]</option>
                        <option value="74" name="nid">世界通用签证-[35mmx45mm]</option>
                        <option value="75" name="nid">港澳通行证-[33mmx48mm]</option>
                        <option value="76" name="nid">韩国签证-[35mmx45mm]</option>
                        <option value="77" name="nid">泰国签证-[35mmx45mm]</option>
                        <option value="78" name="nid">印度签证-[51mmx51mm]</option>
                        <option value="79" name="nid">以色列签证-[51mmx51mm]</option>
                        <option value="80" name="nid">签证采集-[30mmx40mm]</option>
                        <option value="81" name="nid">入台证-[35mmx45mm]</option>
                        <option value="82" name="nid">马来西亚签证-[35mmx45mm]</option>
                        <option value="83" name="nid">新西兰签证-[76mmx102mm]</option>
                        <option value="84" name="nid">意大利签证-[35mmx40mm]</option>
                        <option value="85" name="nid">阿根廷签证-[40mmx40mm]</option>
                        <option value="86" name="nid">巴西、冰岛签证-[40mmx50mm]</option>
                        <option value="87" name="nid">肯尼亚签证-[50mmx50mm]</option>
                        <option value="91" name="nid">全国计算机考试-[144x192dpi]</option>
                        <option value="93" name="nid">一级建造师证(电子版)-[472x630dpi]</option>
                        <option value="94" name="nid">护士执业资格考试(20~45kb)-[160x210]</option>
                        <option value="95" name="nid">公务员考试报名-[340x450(20k以内)]</option>
                        <option value="96" name="nid">入金证-[35mmx45mm]</option>
                        <option value="97" name="nid">社保卡(350dpi)-[358x441kb]</option>
                        <option value="98" name="nid">成人自考(本科)-[480x720kb]</option>
                        <option value="99" name="nid">自考学位外语考试-[390x567kb]</option>
                        <option value="100" name="nid">英语四级考试-[480x640,100KB]</option>
                        <option value="101" name="nid">二级建造师(天津)-[160x200,20~40kb]</option>
                        <option value="102" name="nid">二级建造师(湖南)-[130x170]</option>
                        <option value="103" name="nid">社保证-[358x441dpi]</option>
                        <option value="104" name="nid">英语AB级考试(144X192)-[144x192dpi]</option>
                        <option value="105" name="nid">英语三级考试-[144x192dpi]</option>
                        <option value="106" name="nid">公务员考试-[130x170]</option>
                        <option value="107" name="nid">二级建造师(西藏)-[455x661]</option>
                        <option value="108" name="nid">公务员考试-[295x413]</option>
                        <option value="109" name="nid">保险职业认证-[210x270]</option>
                        <option value="110" name="nid">注册会计师-[178x220]</option>
                        <option value="111" name="nid">保险职业证-[210x370]</option>
                    </select>

                    <div class="alert alert-warning" role="alert" style="margin-bottom: 0;margin-top: 15px">
                        <lable class="btn-default">颜色选择</lable>
                    </div>

                    <select class="form-control" name="color">
                        <option value="red" name="color">红底</option>
                        <option value="white" name="color">白底</option>
                        <option value="blue" name="color">蓝底</option>
                        <option value="blue_gradual" name="color">蓝色渐变</option>
                        <option value="red_gradual" name="color">红色渐变</option>
                        <option value="gray_gradual" name="color">灰色渐变</option>
                    </select>

                    <input type="submit" value="上传" class="btn-primary text-center" style="margin-top: 20px">
                </form>
            </div>

        </div>
    </div>

</div>


<!-- 页脚 -->
<footer id="task6">
    <div class="jumbotron jumbotron-fluid bg-light">
        <div class="container text-center">
            <h1 class="display-4 text-dark"><strong>ABOUT</strong></h1>
            <p class="lead"></p>
        </div>

        <div class="card-group border border-light">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title text-center"><strong>简介</strong></h5>
                    <p class="card-text">基于PYTHON的智能证件照系统，该站点为黔南民族师范学院2017级物联网工程专业学生李国发毕业设计，
                        该系统仅用于学习交流。同时也能给更多的同学提供一个功能丰富，简单免费的证件照智能换底工具。
                    </p>

                </div>
            </div>
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title text-center"><strong>位置信息</strong></h5>
                    <div class="place" style="margin-left: 230px">
                        <span class="fa fa-map-marker"></span>
                        <span class="text">地址:黔南民族师范学院</span>
                    </div>
                    <div class="phone" style="margin-left: 230px">
                        <span class="fa fa-user"></span>
                        <span class="text">指导老师:罗文兴教授</span>
                    </div>
                    <div class="email" style="margin-left: 230px">
                        <span class="fa fa-envelope"></span>
                        <span class="text">邮箱:1902612430@qq.com</span>
                    </div>

                    <div class="weibo" style="margin-left: 230px">
                        <span class="fa fa-weibo"></span>
                        <span class="text">简书:pythonJam</span>
                    </div>
                </div>


            </div>
            <div class="card text-center">
                <div class="card-body">
                    <h5 class="card-title text-center"><strong>学习交流群</strong></h5>
                    <img src="{% static 'img/code.png' %}" style="width: 150px;height: 150px">
                    <p class="card-text text-center">请扫描上方二维码</p>
                </div>
            </div>
        </div>
        <p class="text-center text-secondary">Copyright<i class="fa fa-registered"></i>黔南民族师范学院2017级物联网工程专业
        </p>
    </div>
</footer>


<!-- 图片上传显示JS代码 -->
<script>
    $('#demo').change(function (){
        //获取用户选择对象
        var file_obj=$(this)[0].files[0]
        //获取文件路径
        var reader=new FileReader()
        reader.readAsDataURL(file_obj)
        //读完之后，存放到result
        //reader.result
        //先加载完成
        reader.onload=function (){
            //修改img标签src属性，
            $('#default').attr('src',reader.result)
        }
    })
</script>

</body>


</html>